<template>
  <div class="account-manage">
    <el-card>
      <div class="header-title">账号管理</div>
      <el-form :inline="true" :model="search" style="margin-bottom: 16px;">
        <el-form-item>
          <el-input v-model="search.keyword" placeholder="账号名称/手机号" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="search.status" placeholder="启用状态" style="width: 120px;">
            <el-option label="全部" value="" />
            <el-option label="已启用" value="1" />
            <el-option label="已停用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="search.departmentId" placeholder="归属部门" style="width: 120px;">
            <el-option label="全部" value="" />
            <el-option v-for="d in departmentList" :key="d.id" :label="d.departmentName" :value="d.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="search.roleId" placeholder="所属角色" style="width: 120px;">
            <el-option label="全部" value="" />
            <el-option v-for="r in roleList" :key="r.id" :label="r.roleName" :value="r.id" />
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="success" @click="openAdd">新增账号</el-button>
      </el-form>
      <el-table :data="tableData" border>
        <el-table-column prop="realName" label="账号名称" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="departmentName" label="归属部门" />
        <el-table-column prop="roleName" label="所属角色" />
        <el-table-column prop="status" label="启用状态">
          <template #default="scope">
            <span :style="{ color: scope.row.status === 1 ? '#13ce66' : '#ff4949', 'margin-right': '8px' }">
              {{ scope.row.status === 1 ? '已启用' : '已停用' }}
            </span>
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              :active-color="'#13ce66'"
              :inactive-color="'#ff4949'"
              @change="val => handleStatusChange(scope.row, val)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" @click="openEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 16px;"
        background
        layout="prev, pager, next, jumper, ->, total"
        :current-page="pagination.page"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="handlePageChange"
      />
      <el-dialog v-model="dialogVisible" :title="dialogTitle" width="400px">
        <el-form :model="form" label-width="80px">
          <el-form-item label="账号名称">
            <el-input v-model="form.realName" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" type="password" />
          </el-form-item>
          <el-form-item label="归属部门">
            <el-select v-model="form.departmentId" placeholder="请选择部门">
              <el-option v-for="d in departmentList" :key="d.id" :label="d.departmentName" :value="d.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属角色">
            <el-select v-model="form.roleId" placeholder="请选择角色">
              <el-option v-for="r in roleList" :key="r.id" :label="r.roleName" :value="r.id" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAccountPage, addAccount, updateAccount, deleteAccount, updateAccountStatus } from '@/api/account'
import request from '@/utils/request'
import { ElMessageBox, ElMessage } from 'element-plus'

const search = ref({ keyword: '', status: '', departmentId: '', roleId: '' })
const tableData = ref([])
const pagination = ref({ page: 1, size: 10, total: 0 })
const dialogVisible = ref(false)
const dialogTitle = ref('新增账号')
const form = ref({ userId: null, realName: '', phone: '', password: '', departmentId: '', roleId: '' })
const departmentList = ref([])
const roleList = ref([])

onMounted(() => {
  fetchData()
  fetchDepartments()
  fetchRoles()
})

function fetchData() {
  getAccountPage({
    page: pagination.value.page,
    size: pagination.value.size,
    keyword: search.value.keyword,
    status: search.value.status,
    departmentId: search.value.departmentId,
    roleId: search.value.roleId
  }).then(res => {
    if (res.data) {
      tableData.value = res.data.records || []
      pagination.value.total = res.data.total || 0
    }
  })
}

function fetchDepartments() {
  request.get('/api/staff/departments/options').then(res => {
    departmentList.value = res || []
  })
}
function fetchRoles() {
  request.get('/api/staff/roles/options').then(res => {
    roleList.value = res || []
  })
}

function reset() {
  search.value = { keyword: '', status: '', departmentId: '', roleId: '' }
  pagination.value.page = 1
  fetchData()
}

function openAdd() {
  dialogTitle.value = '新增账号'
  form.value = { userId: null, realName: '', phone: '', password: '', departmentId: '', roleId: '' }
  dialogVisible.value = true
}

function openEdit(row: any) {
  dialogTitle.value = '编辑账号'
  form.value = { ...row, password: '' }
  dialogVisible.value = true
}

function submitForm() {
  const api = form.value.userId ? updateAccount : addAccount
  api(form.value).then(() => {
    dialogVisible.value = false
    fetchData()
    ElMessage.success('操作成功')
  })
}

function handlePageChange(page: number) {
  pagination.value.page = page
  fetchData()
}

function handleDelete(row: any) {
  ElMessageBox.confirm('确定要删除该账号吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    deleteAccount(row.userId).then(() => {
      ElMessage.success('删除成功')
      fetchData()
    })
  })
}

function handleStatusChange(row: any, val: number) {
  updateAccountStatus(row.userId, val).then(() => {
    ElMessage.success('状态已更新')
  }).catch(() => {
    ElMessage.error('状态更新失败')
    row.status = val === 1 ? 0 : 1
  })
}
</script>

<style scoped>
.header-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
.account-manage {
  padding: 24px;
}
</style>
 